Menus (Options lists)

Summary:
  • Options list:
    • Accessed from the header bar.
    • Closed by selecting an action or by tapping outside the options list.
    • When the options list is open, the background is dimmed.
    • The options list contains one row text items, related to the entire view.
    • The most important functions are listed first.
    • All options are text-only items (screen commands).
    • Options list should be used even with only one item in it.
  • Context menu:
    • A shortcut to item specific functions.
    • Should not be the only means to access a certain action.
    • Accessed by long pressing on an item.
    • Closed by selecting an action or by tapping outside the list.
    • When the options list is open, the background is dimmed.
Java

Related design guidelines

Options list

Figure 1. Options list with touch down state on the second item
Figure 2. Options list in landscape

Options list is a UI component embedded in the header bar, positioned on the left edge of the screen and always identified by an icon.

  • Opens by tapping the icon.
  • Closes by either tapping outside the list or by tapping again on the icon.

When Options are open, the whole content area in the background is dimmed. Text labels in lists are always one row.

Options menu contains global functions for that state. The order of the items is defined by priority.

  • The most frequently used actions are put at the top of the list.
  • The less frequently used actions are put at the end of the list.

If no commands are defined for the Options list, the icon is shown dimmed.

When there are more items than fit to the options list window, to hint that the menu is scrollable, the last item of the list is partially cut. While scrolling, a scroll bar fades in to indicate the length of the list. Even though Options lists can be scrolled, it is recommended to avoid overloading.

See the section ‘Confirming changes’ for details of in which cases a confirmation note should be shown to the user when a selection is made.

Context menu

Figure 3. Context menu. The item highlighted in background has been long-pressed.

When a user performs long press on an object, a context menu opens as shown in the figure above.

  • Displays commands in a text-only list within a popup window.
  • The commands apply only to the specific object on which the long press was done.
  • While the context menu is open, the content area background is dimmed. The object which the menu belongs to is highlighted under the dimming.
  • The menu closes by tapping outside the menu or by selecting an action with a tap.

A single tap action for an object should not be duplicated in its context menu. For example, if single tap on the item opens it in a new view, the context menu should not contain action 'Open' and duplicate the functionality.

Context menus should not be the only means of activating an action, because they are less discoverable than onscreen buttons or the Options list, and they may not be found by all users. Therefore, it’s recommended that the actions in the context menu are also made available in the next state down in the navigation hierarchy (e.g., in the normal Options list). Because of this duplication, using the context menu is considered a shortcut for going to the next screen and performing the operation there.